<template>
  <div class="dashboard-container">
    <div class="app-container">
      <!-- 卡片区域 -->
      <!-- 面包屑 -->
      <el-card shadow="never" >
        <el-breadcrumb separator-class="el-icon-arrow-right" v-if="$route.query.id">
          <el-breadcrumb-item>学科管理</el-breadcrumb-item>
          <el-breadcrumb-item>活动列表</el-breadcrumb-item>
          <el-breadcrumb-item>标签管理</el-breadcrumb-item>
        </el-breadcrumb>
        <!-- 分割线 -->
        <el-divider content-position="right" v-if="$route.query.id"></el-divider>
        <!-- 头部结构 -->
        <el-row type="flex">
          <el-col :span="22">
            <el-form :inline="true" class="demo-form-inline">
              <el-form-item label="标签名称">
                <el-input v-model="tagName"></el-input>
              </el-form-item>
              <el-form-item label="状态" class="state">
                <el-select v-model="state" placeholder="请选择">
                  <el-option
                    v-for="item in statusList"
                    :key="item.value"
                    :value="item.value"
                    :label="item.label"
                  ></el-option>
                </el-select>
              </el-form-item>
              <el-button size="small" @click="del">清除</el-button>
              <el-button type="primary" size="small" @click="search"
                >搜索</el-button
              >
            </el-form>
          </el-col>
          <el-col :span="1">
            <el-button
              type="text"
              icon="el-icon-back"
              @click="back"
              v-if="$route.query.id"
              >返回学科</el-button
            >
          </el-col>
          <el-col :span="2" class="newadd">
            <el-button
              type="success"
              icon="el-icon-edit"
              size="small"
              @click="newadd"
              >新增标签</el-button
            >
          </el-col>
        </el-row>

        <!-- 数据总数 -->
        <el-alert :title="`数据一共${total}条`" type="info" show-icon>
        </el-alert>
        <!-- 数据表格 -->
        <br />
        <!--  -->
        <el-table :data="tableList" style="width: 100%">
          <el-table-column type="index" label="序号" width="180px">
          </el-table-column>
          <el-table-column prop="subjectName" label="所属学科" width="200px">
          </el-table-column>
          <el-table-column prop="tagName" label="标签名称"> </el-table-column>
          <el-table-column prop="username" label="创建者"> </el-table-column>
          <el-table-column prop="addDate" label="创建日期">
            <template slot-scope="scope">
              <span> {{ scope.row.addDate | addTime }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="state" label="状态">
            <template slot-scope="scope">
              <span> {{ scope.row.state | changestatus }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="address" label="操作">
            <template slot-scope="scope">
              <!-- 1是启用  0是禁用 -->
              <el-button
                type="text"
                size="small"
                @click="editStatus(scope.row)"
                >{{ scope.row.state ? "启用" : "禁用" }}</el-button
              >
              <el-button
                :disabled="scope.row.state == 0"
                type="text"
                size="small"
                @click="revise(scope.row)"
                >修改</el-button
              >
              <el-button
                :disabled="scope.row.state == 0"
                type="text"
                size="small"
                @click="rev(scope.row.id)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <br />

        <!-- 页码 -->
        <div class="page">
          <el-pagination
            class="page_one"
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            layout="prev, pager, next, sizes,jumper"
            :current-page="query.page"
            :page-sizes="[5, 10, 20, 50]"
            :page-size="query.pagesize"
            :total="total"
          >
          </el-pagination>
        </div>
      </el-card>

      <!-- 新增弹框 -->
      <el-dialog
        :title="isEdit ? '修改目录' : '新增目录'"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
        :visible.sync="showDialog"
        width="20%"
      >
        <el-form
          ref="roleForm"
          :model="roleForm"
          :rules="roleRules"
          label-width="100px"
        >
          <el-form-item label="所属学科"
          prop="subjectID"
           v-if="!this.$route.query.id && !this.$route.query.name">
            <el-select placeholder="请选择" v-model="roleForm.subjectID">
              <el-option
                v-for="item in tableList"
                :key="item.id"
                :label="item.subjectName"
                :value="item.subjectID"
                >{{ item.subjectName }}</el-option
              >
            </el-select>
          </el-form-item>
          <el-form-item
            label="目录名称"
            prop="tagName">
            <el-input v-model="roleForm.tagName" placeholder="请输入目录名称" />
          </el-form-item>
        </el-form>

        <!-- 底部 -->
        <el-form class="output">
          <el-button size="small" @click="cancleRoles">取消</el-button>
          <el-button size="small" type="primary" @click="roleSubmit">{{
            isEdit ? "修改" : "新增"
          }}</el-button>
        </el-form>
      </el-dialog>
    </div>
  </div>
</template>

<script>
// 获取表格数据
// 输入框数据 调用数据
import {
  list,
  add,
  update,
  remove,
  detail,
  changeState
} from '@/api/hmmm/tags.js'
// 导入dayjs
import dayjs from 'dayjs'
import { status } from '@/api/hmmm/constants.js'
export default {
  name: 'subject',
  // 格式化时间
  filters: {
    addTime (time) {
      return dayjs(time).format('YYYY-MM-DD HH:mm:ss')
    },
    // 状态
    changestatus (val) {
      const obj = status.find((item) => item.value === val)
      if (obj) {
        return obj.label
      } else {
        return '未知'
      }
    }
  },
  data () {
    return {
      statusList: [], // 状态的数组
      simpleList: [], // 下拉框的数据
      showDialog: false,
      isEdit: false, // false增加按钮
      // 声明的修改框中的数据
      roleForm: {
        subjectID: this.$route.query.id
      },

      // 渲染结构列表 list接口需要的数据
      query: {
        page: 1, // 页码
        pagesize: 10 // 每页条数
      },
      total: 0,
      // 搜索需要字段
      tagName: '',
      state: '',
      // 数据列表
      tableList: [], // 渲染数据的数据列表
      roleRules: {
        tagName: [
          { required: true, message: '目录名称不能为空', trigger: 'blur' }
        ]
      }, // 校验
      // 下拉框中绑定需要先声明一个value
      value: ''
    }
  },
  created () {
    this.list(this.query)
    // 把状态赋值给数组
    this.statusList = status
  },
  watch: {
    // 只有state改变的时候才需要发请求带上state字段
    state (newVal, oldVal) {
      this.query.state = newVal
    }
  },
  methods: {
    // 返回按钮

    back () {
      // 点击退回按钮
      this.$router.back()
    },
    // 删除
    async rev (data) {
      const delRes = await this.$confirm(
        '此操作将永久删除部门, 是否继续?',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      ).catch((err) => err)
      // console.log(delRes)
      if (delRes === 'cancel') return this.$message('您取消了操作')
      const delRemove = await remove({ id: data })
      // 后台返回的数据
      // console.log(delRemove)
      if (!delRemove) return

      this.$message.success('操作成功')
      this.list()
    },
    // 修改数据
    // data 要修改的数据
    async revise (data) {
      // 点击获取到整行的数据
      // console.log(data, 'data')
      // 弹框展示
      this.showDialog = true
      // 确定是修改
      this.isEdit = true
      // 利用详情的api   id：点击的是哪行数据  data数据
      const res = await detail(data)
      // 把数据回显 调用详情
      // console.log(res)
      // 把后台的到的数据赋值给表单
      this.roleForm = res.data
      // 如果没有subjectName
      if (!data.subjectName) {
        // 这个subjectID就为空
        this.roleForm.subjectID = ''
      }
    },

    // 启用禁用
    async editStatus (data) {
      console.log(data, 'qian')
      // 把详情页获取到的数据给
      const userinfo = await detail(data)
      // console.log(userinfo)
      this.userinfo = userinfo.data
      console.log(userinfo)
      // 1禁用 0开启
      // 当状态是开启的时候 点击后 状态变成1禁用 提示 并渲染列表
      if (this.userinfo.state === 0) {
        this.userinfo.state = 1
        await changeState(this.userinfo)
        this.$message.success('禁用成功')
        this.list()
      } else {
        this.userinfo.state = 0
        await changeState(this.userinfo)
        this.$message.success('启用成功')
        this.list()
      }
      // const res = await changeState(data)
      // if (res.status !== 200) {
      //   return
      // }
      // this.$message.success('操作成功')
      // console.log(res, 'dianjihou')
      // this.list()
    },

    // 搜索
    search () {
      // 发送请求需要携带 tagName 或者 state字段
      // 把我输入的name赋值给后台数据中的name
      this.query.tagName = this.tagName
      // console.log(this.tagName)
      this.list(this.query)
    },

    // 取消按钮
    cancleRoles () {
      // 关闭弹框
      this.showDialog = false
      this.list()
    },
    // 确定按钮  添加数据和修改数据
    async roleSubmit () {
      // 先打印一下我在弹框中输入的内容
      // console.log(this.roleForm)
      // 把roleForm里面的内容给接口 然后在通过this.list()重新更新渲染到数据列表上
      // const res = await update(this.roleForm)
      // 修改以后的数据
      // console.log(res)
      // const res = await add(this.roleForm)
      // 得到添加以后的数据
      // console.log(res)
      // 判断一下有没有id传进来  （这个确定的弹框一个是跳转过来的添加）
      // 这个跳转到标签添加东西   也要获取到学科的那个id  我是给哪个学科添加的标签
      // if (this.$router.query.id) {
      //   // this.roleForm.id = ''
      //   // this.roleForm.subjectID = this.$router.query.id
      //   // console.log(this.roleForm.subjectID)

      // }
      const result = (await this.isEdit) ? update(this.roleForm) : add({ tagName: this.roleForm.tagName, subjectID: +this.roleForm.subjectID })
      console.log('数据', result)
      this.$message.success(this.isEdit ? '修改目录成功' : '增加成功')
      // 重新渲染
      this.list()
      // 重置表单
      this.roleForm = {}
      // 弹框关闭
      this.showDialog = false
    },

    // 新增弹框
    newadd () {
      this.showDialog = true
      this.isEdit = false
    },

    // 清除
    del () {
      console.log(this.state)
      // this.formInline = {
      //   user: '',
      //   region: ''
      // }
      this.tagName = ''
      this.state = ''
    },

    // 获取数据列表 渲染表格结构
    // params 需要携带5个参数 必须是对象
    async list (params) {
      const res = await list(params)
      // console.log(res)
      // 把渲染的数据给列表
      this.tableList = res.data.items
      // 给总共的数据条数赋值
      this.total = res.data.counts
    },

    // 每条页数发生改变 10/20/30
    handleSizeChange (newSize) {
      this.query.pagesize = newSize
      this.list(this.query)
    },

    // 当前页面发生改变
    handleCurrentChange (newPage) {
      this.query.page = newPage
      // 必须要传参数
      this.list(this.query)
    }
  }
}
</script>

<style scoped>
.newadd {
  padding-left: 40px;
}
.state {
  padding-left: 40px;
}
.page {
  display: flex;
}
.page_one {
  flex: 1;
  text-align: right;
}
.output {
  text-align: right;
  padding-top: 40px;
}
::v-deep .el-select {
  width: 100%;
}
</style>
